<template>
    <div class="" style="height: 100px;">
         <swiper-container ref="swiperRef" class="swiper-container"> 
            <swiper-slide v-for="item,index in list" class="swiper-slide" :key="item">
                <div>
                    {{ item }}--{{ index }}
                </div>
            </swiper-slide>
         </swiper-container> 
    </div>
</template>
<script lang="ts" setup>
import { register } from 'swiper/element/bundle';
import 'swiper/css';
const swiperRef = ref();
const list = [1,2,3,4,5,6,7,8,9,10];
const swiperParmas = {
    slidesPerView: 3,
    spaceBetween: 30,
    centeredSlides: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
}
onMounted(() => {
    register();
    console.log(swiperRef.value);
    Object.assign(swiperRef.value,swiperParmas);
    swiperRef.value.initialize();
    
})
</script>


<style scoped lang="scss">
// 样式隔离


.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
//   width: auto !important;
  height: 100%;
  background-color: #f5f5f5;
}
</style>
